import AppStore from '@/store/app'
import {toHome} from '@/utils/pageRedirect'
import {View} from '@tarojs/components'
import Taro from '@tarojs/taro'
import React, {CSSProperties, useContext, useEffect} from 'react'

const MyNav: React.FC<{
  color?: string
  showBack?: boolean
  style?: CSSProperties
}> = ({children, color, showBack = true, style}): JSX.Element => {
  const {
    mynav: {titleHeight, statuHeight},
    setMynav
  } = useContext(AppStore)

  useEffect(() => {
    let systemInfo = Taro.getSystemInfoSync()
    setMynav(systemInfo.statusBarHeight || 44, 'statuHeight')
  }, [])

  return (
    <View
      style={{
        marginTop: statuHeight * 2 + 'rpx',
        height: titleHeight * 2 + 'rpx',
        lineHeight: titleHeight * 2 + 'rpx'
      }}
      className="w-screen flex items-center z-50"
    >
      {showBack ? (
        <View
          className="w-12 h-12 text-17 ml-16 flex justify-center items-center border-solid border-t-0 border-l-2 border-r-0 border-b-2 transform rotate-45"
          style={{
            borderColor: color || 'black'
          }}
          onClick={() => {
            Taro.navigateBack().catch(err => {
              toHome()
            })
          }}
        ></View>
      ) : (
        <View className="w-24 ml-16"></View>
      )}
      <View
        className="flex-1 ml-72 mr-100"
        style={Object.assign(
          {
            fontSize: '34rpx',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            color: color || 'black',
            fontWeight: 'bold',
            textAlign: 'center'
          },
          style
        )}
      >
        {children}
      </View>
    </View>
  )
}
export default MyNav
